<template>
	<view class="share-poster" v-if="show">
		<view class="mask" :class="{ on: showanim }" v-if="postshow"></view>
		<view class="mask" :class="{ on: showanim }" @click="hideshare('show')" v-else></view>
		<view class="toaskboxs" :class="{ on: showanim }">
			<view class="rows flex-center">
				<view class="item" @click="shareFc()" v-if="!posterImage">
					<view class="icon flex-center">
						<image src="/static/images/postergx_icon.png" mode="aspectFill" class="imgs"></image>
					</view>
					<view class="subtitle">生成海报</view>
				</view>
				<view class="item" @click="saveImage()" v-else>
					<view class="icon flex-center">
						<image src="/static/images/down_icon.png" mode="aspectFill" class="imgs"></image>
					</view>
					<view class="subtitle">保存图片</view>
				</view>
				<button type="button" class="item" open-type="share" id="1" :data-type="sharetype">
					<view class="icon flex-center">
						<image src="/static/images/powechat_icon.png" mode="aspectFill" class="imgs"></image>
					</view>
					<view class="subtitle">微信好友</view>
				</button>
			</view>
			<view class="toolbtns" @click="hideshare('show')">取消</view>
		</view>
		<view class="share-imgs" :class="{ on: postshowanim }" v-if="postshow">
			<scroll-view class="scroll_y" :scroll-y="true">
				<view class="boxsimg">
					<image :src="posterImage" mode="widthFix" class="imgs"></image>
				</view>
			</scroll-view>
		</view>
		<view class="hideCanvasView">
			<canvas class="hideCanvas" :id="canvasId" :canvas-id="canvasId" :style="{ width: (poster.width || 10) + 'px', height: (poster.height || 10) + 'px' }"></canvas>
		</view>
		<privacybox ref="privacybox"></privacybox>
	</view>
</template>

<script>
import _app from '@/util/QS-SharePoster/app.js';
import { getSharePoster } from '@/util/QS-SharePoster/QS-SharePoster.js';
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'share-poster',
	props: {
		item: {
			type: Object,
			default() {
				return {};
			},
		},
		shareurl: {
			type: String,
			default: '',
		},
		/*---0为抽签：抽签进行地如火如荼, 还不赶快来参与
			1为抽盒：我在怼隐藏，快来助我一臂之力！
			2为抽选：欧皇保佑，这一次，救救孩子！
			3为商城：安利一个新娃 真香！
			4为一番赏：我在抽欧气一番赏，快来祝我一臂之力
			5为助力红包：来助我一发入魂吧！
		---*/
		code: {
			type: Number,
			default: 0,
		},
		sharetype: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			show: false,
			showanim: false,
			postshow: false,
			postshowanim: false,
			canvasId: 'default_PosterCanvasId',
			posterImage: '',
			poster: {},
			codetext: [
				'抽签进行地如火如荼, 还不赶快来参与',
				'我在怼隐藏，快来助我一臂之力！',
				'欧皇保佑，这一次，救救孩子！',
				'安利一个新娃 真香！',
				'我在抽欧气一番赏，快来祝我一臂之力',
				'来助我一发入魂吧！',
			],
		};
	},
	created() {},
	mounted() {},
	methods: {
		showshare(key = 'show') {
			if (this[key]) {
				return;
			}
			this[key] = true;
			setTimeout(() => {
				this[`${key}anim`] = true;
			}, 10);
		},

		hideshare(key = 'show') {
			if (!this[`${key}anim`]) {
				return;
			}
			this[`${key}anim`] = false;
			setTimeout(() => {
				this[key] = false;
			}, 300);
		},

		async shareFc() {
			let zheight = 0;
			let _this = this;
			try {
				const d = await getSharePoster({
					_this: this, //若在组件中使用 必传
					type: 'customType',
					formData: {
						//访问接口获取背景图携带自定义数据
					},
					posterCanvasId: this.canvasId, //canvasId
					delayTimeScale: 20, //延时系数
					background: {
						width: 614,
						height: 998,
						backgroundColor: '#ffffff',
					},
					drawArray: ({
						bgObj, //背景图对象
						type, //自己设置的自定义标识
						bgScale, //背景缩放
						setBgObj, //动态设置画布(宽高),若使用该方法不建议背景图方式绘制, 建议使用background自定义画布绘制, 因为这个方法绘制修改背景图的宽高
						getBgObj,
					}) => {
						const dx = bgObj.width * 0.3;
						const fontSize = bgObj.width * 0.045;
						const lineHeight = bgObj.height * 0.04;
						//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
						return new Promise((rs, rj) => {
							rs([
								{
									type: 'image',
									id: 'Image',
									// url: `${this.item.image}`,
									dx: 0,
									dy: 0,
									dWidth: 614,
									dHeight: 614,
								},

								{
									type: 'qrcode',
									id: 'Qrcode',
									// text: _this.webUrl + '/go?path='+encodeURIComponent(this.shareurl),
									text: _this.webUrl + '/mp/go?path=' + this.shareurl,
									size: 455,
									background: '#ffffff',
									dx: 80,
									allInfoCallback({ drawArray }) {
										const Ftitle = drawArray.find(item => item.id === 'Image');
										console.log(Ftitle, 'iomg2');
										zheight = 614;
										return {
											dy: 90,
										};
									},
								},
								// {
								// 	type: 'text',
								// 	id: 'Ftitle',
								// 	text: this.item.title,
								// 	size: 34,
								// 	color: '#F27836',
								// 	allInfoCallback({ drawArray }) {
								// 		const LineInfo = drawArray.find(item => item.id === 'Qrcode');
								// 		console.log(LineInfo, 'iomg');
								// 		zheight = 898;
								// 		return {
								// 			lineFeed: {
								// 				maxWidth: 546,
								// 				lineHeight: 50
								// 			},
								// 			dy: LineInfo.dy + LineInfo.size + 70
								// 		};
								// 	},
								// 	infoCallBack(textLength) {
								// 		let len = bgObj.width - textLength;
								// 		let linenum = Math.ceil(textLength / 546);
								// 		return {
								// 			dx: linenum > 1 ? bgObj.width / 2 : (bgObj.width - textLength) / 2,
								// 			dHeight: Math.ceil(textLength / 546) * 50,
								// 			textAlign: linenum == 1 ? 'left' : 'center'
								// 		};
								// 	}
								// },
								// {
								// 	type: 'text',
								// 	id: 'text1',
								// 	text: '长按识别二维码',
								// 	size: '24',
								// 	color: '#7e7a7b',
								// 	allInfoCallback({ drawArray }) {
								// 		const Qrcode = drawArray.find(item => item.id === 'Qrcode');
								// 		let dx = Qrcode.dx + Qrcode.size + 20;
								// 		let dy = Qrcode.dy + 52;
								// 		zheight = Qrcode.dy + Qrcode.size + 40;
								// zheight = Qrcode.dy + Qrcode.size + 40;
								// 		return {
								// 			dx,
								// 			dy
								// 		};
								// 	}
								// },
								// {
								// 	type: 'text',
								// 	id: 'text2',
								// 	text: '了解盲盒小程序',
								// 	size: '24',
								// 	color: '#7e7a7b',
								// 	allInfoCallback({ drawArray }) {
								// 		const text1 = drawArray.find(item => item.id === 'text1');
								// 		let dx = text1.dx;
								// 		let dy = text1.dy + 40;
								// 		return {
								// 			dx,
								// 			dy
								// 		};
								// 	}
								// },
								// {
								// 	type: 'image',
								// 	id: 'imgLogo',
								// 	url: '/static/images/logo.png',
								// 	dWidth: 135,
								// 	dHeight: 40,
								// 	dx: 444,
								// 	allInfoCallback({ drawArray }) {
								// 		const Qrcode = drawArray.find(item => item.id === 'Qrcode');
								// 		let dy = Qrcode.dy + (Qrcode.size - 40) / 2;
								// 		return {
								// 			dy
								// 		};
								// 	}
								// }
							]);
						});
					},
					setCanvasWH: ({ bgObj, type, bgScale }) => {
						bgObj.height = zheight;
						this.poster = bgObj;
					},
				});
				console.log(d, 'dddd');
				this.posterImage = d.poster.tempFilePath;
				this.showshare('postshow');
			} catch (e) {
				_app.hideLoading();
				_app.showToast(JSON.stringify(e));
			}
		},

		saveImage() {
			let _this = this;

			// this.privacy_show_Judge('show_privacys').then(result => {
			// 	if (result) {
			// 		// 需要弹窗
			// 		_this.$refs.privacybox.propshow();
			// 		return
			// 	}
			// });
			//正常逻辑
			uni.authorize({
				scope: 'scope.writePhotosAlbum',
				success: () => {
					_this.saveImageToPhotosAlbums();
				},
				fail: err => {
					uni.showModal({
						content: '如需保存分享图，请先开启授权~',
						confirmText: '去授权',
						success(res) {
							if (res.confirm) {
								uni.openSetting({
									success(res) {},
								});
							}
						},
					});
				},
			});
			// uni.saveImageToPhotosAlbum({
			// 	filePath: this.posterImage,
			// 	success(res) {
			// 		_app.showToast('保存成功');
			// 		_this.hideshare();
			// 	},
			// 	fail(err) { }
			// });
		},

		saveImageToPhotosAlbums() {
			let _this = this;
			uni.saveImageToPhotosAlbum({
				filePath: this.posterImage,
				success(res) {
					_app.showToast('保存成功');
					_this.hideshare();
				},
				fail(err) {},
			});
		},
	},
	watch: {
		showanim(newVal) {
			if (!newVal && this.postshow) {
				this.hideshare('postshow');
				this.posterImage = '';
			}
		},
	},
};
</script>

<style lang="scss">
.share-poster {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99999;

	.mask {
		width: 100%;
		height: 100%;
		background: rgba($color: #000000, $alpha: 0.5);
		opacity: 0;
		visibility: hidden;
		transition: all 0.4s ease;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;

		&.on {
			opacity: 1;
			visibility: visible;
		}
	}

	.toaskboxs {
		width: 100%;
		// height: 306rpx;
		background: #f5f5f5;
		border-radius: 20rpx 20rpx 0 0;
		transition: transform 0.3s ease;
		transform: translateY(100%);
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 2;

		&.on {
			transform: translateY(0);
		}

		.rows {
			.item {
				width: 218rpx;
				height: 218rpx;
				margin: 0 20rpx;
				padding: 32rpx 0 0 0;
				background: none;
				line-height: 1.4;

				&::after {
					display: none;
				}

				.icon {
					width: 102rpx;
					height: 102rpx;
					margin: 0 auto;
					background: #fff;
					border-radius: 50%;

					.imgs {
						width: 100%;
						height: 100%;
					}
				}

				.subtitle {
					font-size: 28rpx;
					color: #968f92;
					text-align: center;
					margin-top: 14rpx;
				}
			}
		}

		.toolbtns {
			width: 100%;
			// height: 88rpx;
			line-height: 88rpx;
			background: #fff;
			color: #968f92;
			text-align: center;
		}
	}

	.share-imgs {
		width: 100%;
		height: calc(100vh - 306rpx);
		padding: 50rpx 0;
		opacity: 0;
		transition: all 0.4s ease;
		position: absolute;
		transform: scale(1.2);
		left: 0;
		top: 0;
		z-index: 2;

		&.on {
			opacity: 1;
			transform: scale(1);
		}

		.scroll_y {
			height: calc(100vh - 406rpx);
		}

		.boxsimg {
			padding: 0 68rpx;

			.imgs {
				width: 100%;
				border-radius: 22rpx;
			}
		}
	}
}

.hideCanvasView {
	position: relative;
}

.hideCanvas {
	position: fixed;
	top: -99999upx;
	left: -99999upx;
	z-index: -99999;
}
</style>
